// 创建一个画布
const canvas = wx.createCanvas()

// 记录游戏是否结束
var gameOver = false;


// 可以看作画笔
const ctx = canvas.getContext('2d') // 创建一个 2d ctx

// 获取窗口宽高
const {
  windowWidth,
  windowHeight
} = wx.getSystemInfoSync()
// 设置填充颜色
ctx.fillStyle = "#f8d263"
// 用矩形填充整个背景
ctx.fillRect(0, 0, windowWidth, windowHeight)

const left = 20; // 距离左边的距离
const gezi = (windowWidth - left) / 15; // 格子大小
const w = 14 * gezi; // 棋盘宽度
const top = 100; // 距离上边的距离




// 循环绘制棋盘
for (var i = 0; i < 15; i++) {
  // 画横线
  drawLine(left, top + i * gezi, left + w, top + i * gezi);
  // 画竖线
  drawLine(left + i * gezi, top, left + i * gezi, top + w);
}

//15*15
var map=[
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
];


var isWhite = false;
wx.onTouchStart(function(e){
  var touch = e.changedTouches[0]
  var x = touch.clientX
  var y = touch.clientY
 
  


  //如果点击超出棋子，不画
if(x < left - gezi / 2 || x > w + left + gezi / 2 || y < top - gezi / 2 || y > w + top + gezi / 2){
  return;
} 
//X 索引
var indexX = Math.round((x - left) / gezi);
//Y 索引
var indexY = Math.round((y - top) / gezi);

//判断点击位置的位置是否有棋子，有则不继续执行
if(map[indexY][indexX]!=0){
  return;
}
// 如果游戏结束就不能下棋子
if(gameOver){
  return;
}

//设置指定位置的数据
map[indexY][indexX] = isWhite?2:1;
console.log(map)
x = indexX * gezi + left;
y = indexY * gezi + top;

//计算当前离点击最近的竖线坐标
x = Math.round((x - left) / gezi) * gezi + left;
//计算当前离点击最近的横线坐标
y = Math.round((y - top) / gezi) * gezi + top;

drawQizi(x, y, isWhite)
  // 调用判断胜负的函数
  checkWin(indexX, indexY);

isWhite = !isWhite;
})


// 画线
function drawLine(x, y, ex, ey) {
  // 画一条线
  ctx.beginPath();
  //设置笔触的颜色
  ctx.strokeStyle = "#000";
  //设置开始坐标
  ctx.moveTo(x, y);
  //设置结束坐标
  ctx.lineTo(ex, ey);
  //绘制线条
  ctx.stroke();
}

// 画棋子
function drawQizi(x, y, isWhite) {
  ctx.fillStyle = isWhite?"#fff":"#000000";
  ctx.beginPath();
  ctx.arc(x, y, gezi/2-5, Math.PI * 2, 0, true);
  ctx.closePath();
  ctx.fill();
}

function checkWin(indexX, indexY) {

  var lines = [
    [
      [
        [0, -1],
        [0, -2],
        [0, -3],
        [0, -4]
      ], // 左边
      [
        [0, 1],
        [0, 2],
        [0, 3],
        [0, 4]
      ] // 右边
    ], // 横
    [
      [
        [-1, 0],
        [-2, 0],
        [-3, 0],
        [-4, 0]
      ],
      [
        [1, 0],
        [2, 0],
        [3, 0],
        [4, 0]
      ]
    ], // 竖
    [
      [
        [-1, -1],
        [-2, -2],
        [-3, -3],
        [-4, -4]
      ],
      [
        [1, 1],
        [2, 2],
        [3, 3],
        [4, 4]
      ]
    ], // 左上-右下
    [
      [
        [1, -1],
        [2, -2],
        [3, -3],
        [4, -4]
      ],
      [
        [-1, 1],
        [-2, 2],
        [-3, 3],
        [-4, 4]
      ]
    ], // 左下-右上
  ];

  // 循环判断4条线上是否五子连珠
  for (var i = 0; i < 4; i++) {
    checkLine(indexX, indexY, lines[i]);
  }
}

// 判断一条线上是否五子连珠
function checkLine(indexX, indexY, line) {

  var n = 1;
  for (var i = 0; i < 4; i++) {
    if (map[indexY + line[0][i][0]][indexX + line[0][i][1]] == map[indexY][indexX]) {
      n++;
    } else {
      break;
    }
  }

  for (var i = 0; i < 4; i++) {
    if (map[indexY + line[1][i][0]][indexX + line[1][i][1]] == map[indexY][indexX]) {
      n++;
    } else {
      break;
    }
  }

  if (n >= 5) {
    win();
  }
}

function win() {
  ctx.font = 'bold 144px consolas';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'top';
  ctx.font = 'bold 50px arial';
  ctx.fillStyle = 'red';
  ctx.fillText('WIN', 125, 220);
  gameOver = true;
}